import { memo, useEffect } from 'react'
import { Modal, Form, Input } from 'antd'

const { TextArea } = Input;

const EditKnowledgeBaseModal = ({
  open,
  onCancel,
  onOk,
  loading,
  initialValues
}) => {
  const [form] = Form.useForm();

  useEffect(() => {
    if (open) {
      form.setFieldsValue(initialValues || {});
    }
  }, [open, initialValues, form]);

  return (
    <Modal
      title="编辑知识库"
      open={open}
      onCancel={() => {
        form.resetFields();
        onCancel();
      }}
      onOk={() => {
        form.validateFields().then(values => {
          onOk(values);
        });
      }}
      confirmLoading={loading}
      okText="确认"
      cancelText="取消"
      destroyOnClose
      width={600}
    >
      <Form form={form} layout="vertical">
        <Form.Item
          label="知识库名称"
          name="name"
          rules={[{ required: true, message: '请输入知识库名称' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="知识库描述"
          name="description"
        >
          <TextArea rows={4} />
        </Form.Item>
      </Form>
    </Modal>
  );
};

export const MemoEditKnowledgeBaseModal = memo(EditKnowledgeBaseModal);